<template>
  <div class="credit">
    <div class="bgc-grey"></div>
    <div class="form_content">
      <!-- 征信大数据 关键字 -->
      <el-form :model="form" ref="fromtips" size="small" label-width="150px" label-position="right">
        <template v-for="(item, i) in ChangeHeader" :key="item.keywordId">
          <!--输入文本-->
          <el-form-item v-if="item.keywordType === 1" :label="item.keywordType === 1 ? item.keywordName : ''">
            <el-input type="text" v-model.trim="form['value' + Number(i + 1)]" class="!w-[220px]" />
          </el-form-item>

          <!--下拉单选-->
          <el-form-item v-if="item.keywordType === 2" :label="item.keywordType === 2 ? item.keywordName : ''">
            <el-select placeholder="单选" v-model="form['value' + Number(i + 1)]" collapse-tags collapse-tags-tooltip
              class="!w-[220px]">
              <el-option v-for="item in SingleOption['key' + Number(i)]" :key="item.selectItemId" :label="item.selectName"
                :value="item.selectName" @click="handleLinkage(item)" />
            </el-select>
          </el-form-item>
          <!-- 金额 数字 -->
          <el-form-item v-if="item.keywordType === 3" :label="item.keywordType === 3 ? item.keywordName : ''">
            <el-input type="number" v-model.number="form['value' + Number(i + 1)]" class="!w-[220px]"
              @blur="form['value' + Number(i + 1)] = form['value' + Number(i + 1)] < 0 ? 0 : form['value' + Number(i + 1)]" />
          </el-form-item>
          <!--金额数字-->
          <el-form-item v-if="item.keywordType === 4" :label="item.keywordType === 4 ? item.keywordName : ''">
            <el-input type="number" v-model.number="form['value' + Number(i + 1)]" class="!w-[220px]"
              @blur="form['value' + Number(i + 1)] = form['value' + Number(i + 1)] < 0 ? 0 : form['value' + Number(i + 1)]" />
          </el-form-item>
          <!--下拉多选-->
          <el-form-item v-if="item.keywordType === 7" :label="item.keywordType === 7 ? item.keywordName : ''"
            collapse-tags collapse-tags-tooltip>
            <el-select multiple placeholder="多选" v-model="form['MultipleSelectValue' + item.keywordId]"
              class="!w-[220px]">
              <!-- v-model="form['value' + Number(i + 1)]" -->
              <el-option v-for="item in SingleOption['key' + Number(i)]" :key="item.selectItemId" :label="item.selectName"
                :value="item.selectName" />
            </el-select>
          </el-form-item>
          <!--日期+时间-->
          <el-form-item v-if="item.keywordType === 6" :label="item.keywordType === 6 ? item.keywordName : ''">
            <el-date-picker type="datetime" v-model="form['value' + Number(i + 1)]" placeholder="请选择时间日期"
              class="!w-[220px]" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
          <!--日期-->
          <el-form-item v-if="item.keywordType === 8" :label="item.keywordType === 8 ? item.keywordName : ''">
            <el-date-picker type="date" placeholder="请选择时间" v-model="form['value' + Number(i + 1)]" class="!w-[220px]"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </el-form-item>
          <!--多行文本框-->
          <el-form-item v-if="item.keywordType === 9" :label="item.keywordType === 9 ? item.keywordName : ''">
            <el-input type="textarea" v-model.trim="form['value' + Number(i + 1)]" class="!w-[220px]" />
          </el-form-item>
          <!--区间值-->
          <el-form-item v-if="item.keywordType === 11" :label="item.keywordType === 11 ? item.keywordName : ''">
            <el-col :span="7">
              <el-input type="number" v-model.number="form['value' + Number(i + 1)]" class="!w-[100px]" />
            </el-col>
            <el-col :span="1" class="text-center">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="7">
              <el-input type="number" v-model.number="form['value' + Number(i + 1)]" class="!w-[100px]" />
            </el-col>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button v-show="false" type="primary" @click="SaveFromType(fromtips)">
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <p v-else style="font-size: 20px;color: red;">操作便可以得分!</p> -->
  </div>
</template>

<script setup lang="ts">
import { emitter } from "@/utils/mitt";
import { usetaskPass, taskFormDetiall } from "@/store/modules/taskPass";
import { ref, reactive, nextTick, watch, computed, onMounted } from "vue";
const [usetaskPass_, taskDetiall_] = [usetaskPass(), taskFormDetiall()];
const ChangeHeader = ref<any>([]);
const SingleOption = reactive({});
const fromtips = ref()
const objvalue = ref<boolean>(false)
const form = ref({
  taskKeywordId: 0,
  examinationPaperId: "0",
  planId: 0,
  taskId: 0,
  taskDetailId: 0,
});

const props = defineProps({
  value: {
    type: Object
  },
  lable: {
    type: Object
  },
  noKeyWordShow: {
    type: Boolean,
  }
});

watch(
  props,
  newval => {
    if (newval.value) {
      objvalue.value = true;
      DropDownSelection(newval.value)
    } else {
      objvalue.value = false
    };
    // 关键字数据列表
    if (!!newval.lable && newval.lable.length !== 0) {
      updateTablelist(newval.lable);
    }
    if (!!newval.value) {
      ChangeHeader.value = newval.value.submoduleKeywordEntityResultDtos
    }
  },
  { deep: true, immediate: true }
);

// 提交关键字设定
// 点击父组件的 updateTask 方法之前调用一下
emitter.on("SAVE_CrediTable", () => {
  SaveFromType(fromtips.value);
})

//联动选项处理
function handleLinkage(item) {
  emitter.emit("updateSetForm", item);
}
// 保存数据
function SaveFromType(row) {
  console.log('我再credit');

  const task = usetaskPass_.data;
  const subData = reactive({
    taskId: task.taskId,
    uid: Date.now(),
    taskKeywordId: "0",
    taskDetailId: 1
  });
  const from_ = {
    ...form.value,
    ...subData
  };
  taskDetiall_.data = [from_];
}

// 下拉框选项
function DropDownSelection(data: any) {
  data.submoduleKeywordEntityResultDtos.forEach((e, i) => {
    if ((e.keywordType === 2 || e.keywordType === 7) && e.selectItemDtos.length)
      SingleOption["key" + i] = e.selectItemDtos;
    else SingleOption["key" + i] = [];
  });
}

// table 关键字数据列表
function updateTablelist(data: any) {
  const obj = data.map(r => {
    return {
      ...r,
      ...{
        planId: usetaskPass_.data.planId,
        taskId: usetaskPass_.data.taskId,
        taskDetailId: 1
      }
    };
  });
  form.value = obj[0]
  console.log(form.value);

  // taskDetiall_.data = obj;
}

emitter.on('closeForm', () => {
  for (let key in form.value) {
    if (key.includes('value')) {
      delete form.value[key]
    }
  }

})

onMounted(() => {
  console.log(form.value);

})
</script>

<style scoped lang="scss">
.credit {
  height: 320px;
  overflow: auto;
  width: 100%;
  border: 1px solid lightgrey;
  margin-top: 10px;
  border-radius: 5px;

  .el-form {
    width: 360px;
  }


}



:deep(.el-form-item) {
  margin-bottom: 15px;

  .el-form-item__content {
    width: 190px;
  }
}

.bgc-grey {
  height: 30px;
  background-color: #e7e9ec;
  margin-bottom: 20px;
}

.form_content {
  display: flex;
  justify-content: center;
}
</style>
